<template>
  <div>

    <el-row>
      <el-col :span="12">
        <h3>一、单选框</h3>
        <div>
          <h4>1.1、基本使用</h4>
          <el-radio v-model="radio" :label=1>备选项</el-radio>
          <el-radio v-model="radio" :label=2>备选项</el-radio>

        </div>

        <div>
          <h4>1.2、单选框组</h4>
          <el-radio-group v-model="radio1">
            <el-radio :label="3">备选项</el-radio>
            <el-radio :label="6">备选项</el-radio>
            <el-radio :label="9">备选项</el-radio>
          </el-radio-group>

        </div>

        <div>
          <h4>1.3、按钮样式</h4>
          <el-radio-group v-model="radio2" size="medium" @change="redioChange">
            <el-radio-button label="上海"></el-radio-button>
            <el-radio-button label="北京"></el-radio-button>
            <el-radio-button label="广州"></el-radio-button>
            <el-radio-button label="深圳"></el-radio-button>
          </el-radio-group>
        </div>
      </el-col>

      <el-col :span="1">
        <div class="line"></div>
      </el-col>

      <el-col :span="11">
        <h3>二、多选框</h3>

        <div style="margin-top:50px">
          <h4>2.1、多选框组</h4>

          <el-checkbox-group v-model="checkList" @change="changeBox">
            <el-checkbox label="复选框 A"></el-checkbox>
            <el-checkbox label="复选框 B"></el-checkbox>
            <el-checkbox label="复选框 C"></el-checkbox>
            <el-checkbox label="禁用" disabled></el-checkbox>
            <el-checkbox label="选中且禁用" disabled></el-checkbox>
          </el-checkbox-group>

        </div>

        <div style="margin-top:50px">
          <h4>2.2、可选择数量</h4>

          <el-checkbox-group v-model="checkedCities" :min="1" :max="2">
            <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
          </el-checkbox-group>
        </div>

      </el-col>
    </el-row>

  </div>
</template>

<script>
export default {
  data () {
    return {
      radio: 1,
      radio1: 3,
      radio2: '上海',
      checkList: ['复选框 A'],

      checkedCities: ['上海', '北京'],
      cities: ['上海', '北京', '广州', '深圳'],

    }
  },
  methods: {
    clickBu () {
      console.log(2312321312321)

    },

    redioChange (label) {
      console.log(label)
    },

    changeBox (list) {
      console.log(list)

    },
  }
}
</script>

<style scoped>
.line {
  height: 1000px;
  margin-left: 8px;
  border-left: 1px solid black;
}
</style>